import { MaterialIcons } from "@expo/vector-icons";
import { useEffect, useState } from "react";
import {
  Image,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from "react-native";
import AnimatedBottomSheet from "./AnimatedBottomSheet";
import type { Layer } from "./types";

interface LayerManagerProps {
  visible: boolean;
  onClose: () => void;
  getLayers: () => Layer[];
}

/**
 * 图层管理器 - 仅显示图层列表
 * 只显示从外部传入的图层数据，无操作按钮
 */
export default function LayerManager({
  visible,
  onClose,
  getLayers,
}: LayerManagerProps) {
  const [layers, setLayers] = useState<Layer[]>([]);

  // 监听getLayers变化并更新状态
  useEffect(() => {
    const updateLayers = () => {
      setLayers(getLayers());
    };
    updateLayers();

    // 模拟实时更新，可根据实际需求调整监听方式
    const interval = setInterval(updateLayers, 500);
    return () => clearInterval(interval);
  }, [getLayers]);

  /**
   * 渲染单个图层项（仅显示）
   */
  const renderLayerItem = (layer: Layer, index: number) => {
    return (
      <View key={layer.id} style={styles.layerItem}>
        <View style={styles.layerContent}>
          {/* 锁定图标 */}
          <View style={{ marginRight: 8 }}>
            {layer.locked && (
              <MaterialIcons name="lock" size={14} color="#e5e5e5" />
            )}
          </View>

          {/* 图层类型图标或缩略图 */}
          <View style={styles.layerPreview}>
            {layer.type === "image" && layer.data?.uri ? (
              <Image
                source={{ uri: layer.data.uri }}
                style={styles.layerThumbnail}
                resizeMode="cover"
              />
            ) : layer.type === "image" ? (
              <MaterialIcons name="image" size={20} color="#666" />
            ) : layer.type === "text" ? (
              <MaterialIcons name="text-fields" size={20} color="#666" />
            ) : layer.type === "sticker" ? (
              <MaterialIcons name="emoji-emotions" size={20} color="#666" />
            ) : null}
          </View>

          {/* 图层信息 */}
          <View style={styles.layerInfo}>
            <Text style={styles.layerName} numberOfLines={1}>
              {layer.name}
            </Text>
          </View>

          {/* 拖动按钮 */}
          <View style={{ marginLeft: 'auto' }}>
            <MaterialIcons name="menu" size={20} color="#999" />
          </View>
        </View>
      </View>
    );
  };

  return (
    <AnimatedBottomSheet
      visible={visible}
      title="图层列表"
      onCancel={onClose}
      showConfirmButton={false}
      closeButtonPosition="right"
      borderRadius={16}
    >
      <ScrollView style={styles.layerList}>
        {layers.length === 0 ? (
          <Text style={styles.emptyText}>暂无图层</Text>
        ) : (
          layers
            .slice()
            .reverse()
            .map((layer, index) => renderLayerItem(layer, index))
        )}
      </ScrollView>
    </AnimatedBottomSheet>
  );
}

const styles = StyleSheet.create({
  layerList: {
    maxHeight: 400,
    minHeight: 300
  },
  emptyText: {
    textAlign: "center",
    color: "#999",
    fontSize: 16,
    paddingVertical: 40,
  },
  layerItem: {
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderTopWidth: 1,
    borderTopColor: "#f0f0f0",
    
  },
  layerContent: {
    flexDirection: "row",
    alignItems: "center",
  },
  layerNumberContainer: {
    width: 24,
    height: 24,
    justifyContent: "center",
    alignItems: "center",
    marginRight: 8,
  },
  layerNumber: {
    fontSize: 12,
    fontWeight: "600",
    color: "#666",
  },
  layerPreview: {
    width: 32,
    height: 32,
    justifyContent: "center",
    alignItems: "center",
    marginRight: 12,
    overflow: "hidden",
  },
  layerThumbnail: {
    width: 32,
    height: 32,
    borderRadius: 2,
  },
  layerInfo: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  layerName: {
    fontSize: 12,
    fontWeight: "500",
    color: "#000",
  },
  layerMeta: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: 2,
    gap: 8,
  },
  layerType: {
    fontSize: 12,
    color: "#666",
    marginRight: 8,
  },
  layerStatus: {
    fontSize: 12,
    color: "#007AFF",
    marginRight: 8,
  },
  hiddenLayer: {
    color: "#FF3B30",
  },
});
